<script>
import {createDefaultTableValue, createTable} from '@/components/hhd/design/DesignTable/TableHelper';
import DesignTableAction from '@/components/hhd/design/DesignTable/DesignTableAction';

export default {
  name: 'DesignBody',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: undefined,
    },
    width: {
      type: Number,
      default: 1024
    }
  },
  render(h) {
    this.bind();
    return h('div', {class: 'design-container'}, [h('div', {class: 'design-table-wrapper'}, [
      h('div', {class: 'design-item'}, this.createTable(h))
    ])]);
  },
  methods: {
    bindAction () {
      new DesignTableAction().bind(this.$refs.table, {
        change: () => {
          this.$emit('change', this.$refs.tableBody.innerHTML);
        },
        selected: selection => this.selected(selection)
      });
    },
    bind() {
      this.$nextTick(() => {
        this.bindAction();
      });
    },
    selected(selection) {
      this.$emit('selected', selection);
    },
    createTable(h) {
      return [createTable(h, {
        ref: 'table',
        style: {
          width: `${this.width}px`
        },
      }, [
        this.createDragBarContainer(h),
        this.createTableBody(h),
      ])];
    },
    createDragBarContainer() {

    },
    createTableBody(h) {
      this.$nextTick(() => {
        if (!this.$refs.tableBody.children.length) {
          this.$refs.tableBody.innerHTML = this.getValue();
          this.bindAction();
        }
      })
      return h('div', {
        ref: 'tableBody',
        class: 'design-table-body',
      });
    },
    getValue() {
      if (!this.value) {
        let value = createDefaultTableValue();
        this.$emit('change', value);
        return value;
      }
      return this.value;
    },
  }
};
</script>